<template>
  <el-row :gutter="20" class="chart-row">
    <el-col :span="16">
      <el-card class="chart-card">
        <div slot="header">
          <span>职位投递趋势</span>
          <el-select
            v-model="localTimeRange"
            size="small"
            style="float: right"
            @change="handleTimeRangeChange"
          >
            <el-option label="本周" value="7"></el-option>
            <el-option label="上周" value="-7"></el-option>
          </el-select>
        </div>
        <div ref="trendChart" style="height: 350px"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="chart-card">
        <div slot="header">
          <span>热门职位类别</span>
        </div>
        <div ref="pieChart" style="height: 350px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    dashboardData: {
      type: Object,
      required: true,
    },
    timeRange: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      localTimeRange: this.timeRange,
      trendChart: null,
      pieChart: null,
    };
  },
  methods: {
    updateCharts() {
      // 更新趋势图数据
      if (
        this.dashboardData.onlineInfo &&
        this.dashboardData.onlineInfo.weeklyPost
      ) {
        const weekData = this.dashboardData.onlineInfo.weeklyPost;
        const data = [
          weekData.Monday || 0,
          weekData.Tuesday || 0,
          weekData.Wednesday || 0,
          weekData.Thursday || 0,
          weekData.Friday || 0,
          weekData.Saturday || 0,
          weekData.Sunday || 0,
        ];

        this.trendChart.setOption({
          xAxis: {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: data,
              type: "line",
              smooth: true,
              areaStyle: {
                opacity: 0.3,
              },
              lineStyle: {
                width: 2,
              },
              itemStyle: {
                borderWidth: 2,
              },
            },
          ],
        });
      }

      // 更新饼图数据
      if (this.dashboardData.postTypePer) {
        this.pieChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} ({d}%)",
          },
          legend: {
            orient: "horizontal", // 修改为水平方向
            top: 0, // 修改为顶部
            left: "center", // 修改为居中
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: "outside",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
              },
              data: this.dashboardData.postTypePer || [],
            },
          ],
        });
      }
    },
    initCharts() {
      // 初始化趋势图
      this.trendChart = echarts.init(this.$refs.trendChart);
      this.trendChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            type: "line",
            smooth: true,
            areaStyle: {},
          },
        ],
      });

      // 初始化饼图
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.pieChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal", // 修改为水平方向
          top: 0, // 修改为顶部
          left: "center", // 修改为居中
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            data: [],
          },
        ],
      });
    },
    handleTimeRangeChange(value) {
      this.$emit("updateTimeRange", value);
    },
  },
  mounted() {
    this.initCharts();
    this.updateCharts();
  },
  watch: {
    dashboardData: {
      handler(newVal) {
        this.updateCharts();
      },
      deep: true,
    },
    timeRange: {
      handler(newVal) {
        this.localTimeRange = newVal;
      },
    },
  },
};
</script>

<style scoped>
.chart-row {
  margin-bottom: 20px;
}
.chart-card {
  height: 400px;
}
</style>
